<template>
  <div>
    <template v-for="(item, index) in tabList" :key="index">
      <span
        v-if="item.listClass == 'default' || item.listClass == ''"
        :key="item.value"
        :index="index"
        :class="item.cssClass"
        >{{ item.label }}</span
      >
      <a-tag v-else-if="item.listClass === 'info'"> {{ item.label }}</a-tag>
      <a-tag
        v-else-if="item.listClass !== 'info'"
        :color="tagType[item.listClass]"
      >
        {{ item.label }}
      </a-tag>
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';

  interface Item {
    value: any;
    raw: any;
    label: any;
    cssClass: string;
    listClass: string;
  }
  const tagType: any = ref({
    success: '#00B42A',
    // info: '#F2F3F5',
    warning: '#FF7D00',
    danger: '#F53F3F',
    primary: '#4370F8',
  });
  const props = defineProps({
    options: {
      type: [Array, Object],
      default: () => {
        return [];
      },
    },
    value: [Number, String, Array],
  });
  const values = computed(() => {
    if (props.value !== null && typeof props.value !== 'undefined') {
      return Array.isArray(props.value)
        ? [...props.value.map((item) => String(item))]
        : String(props.value).split(',');
    }
    return [];
  });
  const tabList = computed((): Array<Item> => {
    const list: any = ref(props.options);
    return list.value.filter((item: { dictValue: string; value: any }) => {
      return values.value.includes(item.dictValue);
    });
  });
</script>

<style lang="less" scoped>
  span {
    margin-right: 4px;
    margin-bottom: 4px;
  }
</style>
